<template>
	<!-- 登录页面 -->
	<view class="content">
		<!-- 顶部头像 -->
		<view class="top">
			<view class="img">
				<image src="../../static/img/logo1.png" mode="widthFix"></image>
			</view>
			<view class="text">
				汪汪店铺
			</view>
		</view>
		<!-- 顶部头像 -->


		<!-- 表单验证 -->
		<view class="bottom">
			<view class="li">
				<input class="input" type="text" v-model="user.name" placeholder="请输入手机号"><br>
			</view>
			<view class="li">
				<input class="input" type="password" v-model="user.password" placeholder="动态验证码"><br>
				<button>获取验证码</button>
			</view>
			<view class="li3">
				<view class="iconfont icon-31xuanzhong"></view>登录注册代表同意<text>用户协议</text>和<text>隐私协议</text>
			</view>
			<view class="li">
				<button class="button" @click="reg()">登录</button>
			</view>
			<view class="li5">
				<navigator class="button" url="../register/register" open-type="navigate">注册</navigator>
			</view>
		</view>
		<!-- 表单验证 -->
	</view>
</template>

<script>
	// import axios from 'axios';
	export default {
		data() {
			return {
				user: {
					name: "",
					password: ""
				}
			}
		},
		methods: {
			reg() {
				axios.post("http://dida100.com:8888/api/register", this.user)
					.then(reg => {
						if (reg.data.code === 0) {
							alert("注册成功");
							this.$router.push("/login");
						} else {
							alert("用户已存在！")
							console.log(reg.data);
						}
					})
					.catch(err => {
						console.error(err)
					})
			}
		}
	}
</script>

<style lang="less">
	.content {
		width: 100vw;

		// 顶部头像
		.top {
			text-align: center;
			padding-top: 100rpx;

			.img {
				width: 180rpx;
				height: 180rpx;
				margin: 0 auto;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.text {
				margin-top: 30rpx;
				font-weight: 900;
				font-size: 33rpx;
			}
		}

		// 顶部头像



		// 表单验证
		.bottom {
			width: 90vw;
			margin: 0 auto;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;

			.li {
				width: 100%;
				height: 100rpx;
				margin-bottom: 20rpx;
			}

			.li:nth-of-type(1) {
				.input {
					height: 100rpx;
					padding-left: 10rpx;
					background-color: #fff;
					color: #908985;
					border-bottom: 1rpx solid #f7f7f7;
				}
			}

			.li:nth-of-type(2) {
				position: relative;

				button {
					position: absolute;
					top: 15rpx;
					right: 5rpx;
					font-size: 25rpx;
					color: #929292;
					background-color: #f5f5f5;
				}

				.input {
					height: 100rpx;
					padding-left: 10rpx;
					background-color: #fff;
					color: #908985;
					border-bottom: 1rpx solid #f7f7f7;
				}
			}

			.li3 {
				width: 100%;
				height: 40rpx;
				display: flex;
				justify-content: center;
				font-size: 33rpx;
				line-height: 40rpx;
				margin: 15rpx 0;

				text {
					color: #4792fd;
					// font-style: inherit;
				}

				.iconfont {
					margin-right: 20rpx;
				}

				.icon-31xuanzhong {
					color: #f75f60;

				}
			}

			.li:nth-of-type(4) {
				margin: 25rpx;
				margin-bottom: 10rpx;

				.button {
					width: 100%;
					height: 100rpx;
					border-radius: 50rpx;
					background-color: #fc556c;
					color: #fff;
					border: none;
				}
			}

			.li5 {
				margin: 25rpx;
				margin-top: 10rpx;
				width: 100%;

				.button {
					width: 100%;
					height: 100rpx;
					box-sizing: border-box;
					line-height: 100rpx;
					text-align: center;
					border-radius: 50rpx;
					background-color: #fff;
					font-weight: 600;
					color: #000;
					border: 1rpx solid #000;
				}
			}
		}

		// 表单验证
	}
</style>
